<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom File Upload Button</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<!-- Google Fonts  -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #025bee;
}
.container {
  background-color: #ffffff;
  width: 90%;
  max-width: 34.37em;
  position: relative;
  margin: 3.12em auto;
  padding: 3.12em 1.25em;
  border-radius: 0.43em;
  box-shadow: 0 1.25em 2.18em rgb(1, 28, 71, 0.3);
}
input[type="file"] {
  display: none;
}
label {
  display: block;
  position: relative;
  background-color: #025bee;
  color: #ffffff;
  font-size: 1.12em;
  font-weight: 500;
  text-align: center;
  width: 18.75em;
  padding: 1.12em 0;
  margin: auto;
  border-radius: 0.31em;
  cursor: pointer;
}
#num-of-files {
  font-weight: 400;
  text-align: center;
  margin: 1.25em 0 1.87em 0;
}
ul {
  list-style-type: none;
}
.container li {
  font-weight: 500;
  background-color: #eff5ff;
  color: #025bee;
  margin-bottom: 1em;
  padding: 1.1em 1em;
  border-radius: 0.3em;
  display: flex;
  justify-content: space-between;
}

</style>
</head>
<body>
<input type="button" id="export" value="保存"/>
<script src="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.js"></script>
<div class="container">
<input type="file" id="file-input" multiple webkitdirectory/>
<label for="file-input">
<i class="fa-solid fa-arrow-up-from-bracket"></i>
&nbsp; Choose Files To Upload
</label>
<div id="num-of-files">No Files Choosen</div>
<ul id="files-list">
</ul>
</div>
<script>
let fileInput = document.getElementById("file-input");
console.log(fileInput);
let fileList = document.getElementById("files-list");
let numOfFiles = document.getElementById("num-of-files");
let data = []

fileInput.addEventListener("change", () => {
  fileList.innerHTML = "";
  numOfFiles.textContent = `${fileInput.files.length} Files Selected`;

  for (i of fileInput.files) {
    console.log(i.webkitRelativePath); //相对路径
    let reader = new FileReader();
    let listItem = document.createElement("li");
    let fileName = i.name;
    let fileSize = (i.size / 1024).toFixed(1);
    listItem.innerHTML = `<p>${fileName}</p><p>${fileSize}KB</p>`;
    if (fileSize >= 1024) {
      fileSize = (fileSize / 1024).toFixed(1);
      listItem.innerHTML = `<p>${fileName}</p><p>${fileSize}MB</p>`;
    }
    fileList.appendChild(listItem);
    data.push({name: fileName,size: i.size,path: i.webkitRelativePath});
  }
});

var button = document.getElementById("export");
 button.addEventListener("click", saveHandler, false);
 function saveHandler(){
      var content = JSON.stringify(data);
      var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
      saveAs(blob, "save.json");
 }

</script>
</body>
</html>
